<script setup>
	import { storeToRefs } from 'pinia'
	import use购物车 from "@/stores/use购物车.js"
	const 购物车 = use购物车()
	const { 选中组, 显示否, 选中金额 } = storeToRefs(购物车)
	import { onShow, onLoad } from '@dcloudio/uni-app';
	import { computed, ref, onMounted, reactive } from 'vue';

	import use_user from '@/stores/use_user'
	const user = use_user()
	// 是否适配底部安全区域
	const props = defineProps({
		safeAreaInsetBottom: {
			type: Boolean,
			default: undefined
		}
	});

	// 获取屏幕边界到安全区域距离
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync();
	console.log('safeAreaInsets: ',safeAreaInsets);
	
	// const showCartList = computed(() => {
	// 	// console.log('showCartList 购物车.单项组: ', 购物车.单项组);
	// 	// console.log('购物车: ',购物车);
	// 	// return 购物车.单项组.value.length > 0;
	// 	return 购物车.单项组.length > 0;
	// })
	// 优化购物车空列表状态，默认展示列表
	// const showCartList = ref(true);
	// const getMemberCartData = async () => {
	// 	const res = await getMemberCartAPI();
	// 	购物车.单项组 = res.result;
	// 	showCartList.value = res.result.length > 0;
	// };

	// 初始化调用: 页面显示触发
	onLoad(() => {
		// console.log('onLoad ing: ');
	});
	onMounted(() => {
		// console.log('onMounted ing: ');
	});
	const 点删除 = (id) => {
		// 弹窗二次确认
		uni.showModal({
			content: '确认删除么？',
			confirmColor: '#27BA9B',
			success: async (res) => {
				if (res.confirm) {
					await 购物车.删(id)
				}
			},
		});
	};

	const onChangeCount = (ev) => {
		// 开局就更新一次，停不了
		// console.log('onChangeCount ev: ', ev);
		购物车.增或改(ev)
	};

	// 修改选中状态-单品修改
	const onChangeSelected = (item) => {
		// 前端数据更新-是否选中取反
		item.selected = !item.selected;
		// 后端数据更新
		// putMemberCartBySkuIdAPI(item.skuId, {
		// 	selected: item.selected
		// });
	};

	// 计算全选状态
	const isSelectedAll = computed(() => {
		return 购物车.单项组.length && 购物车.单项组.every((v) => v.selected);
	});

	// 修改选中状态-全选修改
	const onChangeSelectedAll = () => {
		// 全选状态取反
		const _isSelectedAll = !isSelectedAll.value;
		// 前端数据更新
		购物车.单项组.forEach((item) => {
			item.selected = _isSelectedAll;
		});
		// 后端数据更新
		// putMemberCartSelectedAPI({
		// 	selected: _isSelectedAll
		// });
	};

	// 计算选中总件数
	const selectedCartListCount = computed(() => {
		return 选中组.value.reduce((sum, item) => sum + item.数量, 0);
	});

	// 结算按钮
	const gotoPayment = async () => {
		if (selectedCartListCount.value === 0) {
			return uni.showToast({
				icon: 'none',
				title: '请选择商品',
			});
		}
		// 先调用placeOrderByCart生成订单成功后再跳转
		// const data = 选中组.value.map(item => {
		// 	return {
		// 		商品id: item.商品id,
		// 		skuid: item.skuid,
		// 		数量: item.数量
		// 	}
		// })
		// let detail = {
		// 	"detail": data
		// };
		// const res = await 购物车.下单(选中组);
		// if (res.code === 0) {
		// 	uni.navigateTo({
		// 		// url: `/pages/orderInfo/orderInfo?orderID=${res.data.orderID}&type=cart`
		// 		url: '/pagesOrder/create/create'
		// 	})
		// } else {
		// 	uni.showToast({
		// 		title: '生成订单失败，请稍后重试',
		// 		mask: true,
		// 		icon: 'none'
		// 	});
		// }
		uni.navigateTo({
			url: '/pagesOrder/create/create'
		});
	};
</script>

<template>
	<scroll-view enable-back-to-top scroll-y class="page">
		<!-- 购物车列表 -->
		<!-- user.hasLogin:{{user.hasLogin}} -->
		<view class="cart-list" v-if="显示否">
			<!-- 滑动操作分区 -->
			<uni-swipe-action>
				<!-- 滑动操作项 -->
				<uni-swipe-action-item v-for="item in 购物车.单项组" :key="item.skuId" class="cart-swipe">
					<!-- 商品信息 -->
					<view class="goods">
						<!-- 选中状态 -->
						<!-- 						<text @tap="onChangeSelected(item)" class="a-radio absolute-top-left"
							:class="{ checked: item.selected }"></text> -->
						<a-check @aclick="onChangeSelected" :item="item" class="absolute-top-left"
							:checked="item.selected "></a-check>
						<navigator :url="`/pages/goods/detail?id=${item.商品id}`" hover-class="none" class="navigator">
							<view class="flex">
								<image mode="aspectFill" class="picture" :src="item.图片"></image>
								<view class="meta">
									<view class="name ellipsis">{{ item.名称 }}</view>
									<view class="attrsText ellipsis">{{ item.配置 }}</view>
									<view class="price">{{ item.价格 }}</view>
								</view>
							</view>
						</navigator>
						<!-- 商品数量 -->
						<view class="count">
							<vk-data-input-number-box v-model="item.数量" :min="1" :max="item.stock" :index="item.id"
								@change="onChangeCount(item)" />
						</view>
						<uni-icons type="uniui-clear" size="23" class="text-negative absolute-top-right"
							@tap="点删除(item.id)">{{'\ue66d'}}</uni-icons>
					</view>
					<!-- 右侧删除按钮 -->
					<template #right>
						<view class="cart-swipe-right">
							<button @tap="点删除(item.id)" class="button delete-button">删除</button>
						</view>
					</template>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<!-- 购物车空状态 -->
		<view class="cart-blank" v-else>
			<image src="/static/images/blank_cart.png" class="image" />
			<template v-if="!user.hasLogin">
				<text class="text">还没登录😀</text>
				<button class="button" @click="user.去登录">去登录</button>
			</template>
			<template v-else>
				<text class="text">啥都没看上？标准降低点，再逛逛吧😀</text>
				<navigator url="/pages/index/index" hover-class="none" open-type="reLaunch">
					<button class="button">回首页</button>
				</navigator>
			</template>
		</view>
		<!-- 吸底工具栏 -->
		<view v-if="显示否" class="toolbar"
			:style="{ paddingBottom: safeAreaInsetBottom ? safeAreaInsets?.bottom + 'px' : 0 }">
			<text @tap="onChangeSelectedAll" class="all" :class="{ checked: isSelectedAll }">全选</text>
			<text class="text">合计:</text>
			<text class="amount">{{ 选中金额 }}</text>
			<view class="button-grounp">
				<view @tap="gotoPayment" class="button payment-button"
					:class="{ disabled: selectedCartListCount === 0 }">
					去结算({{ selectedCartListCount }})
				</view>
			</view>
		</view>
		<!-- 底部占位空盒子 -->
		<view class="toolbar-height"></view>
	</scroll-view>
</template>

<style lang="scss">
	// 根元素
	:host {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #f7f7f8;
	}

	// 滚动容器
	.scroll-view {
		flex: 1;
		background-color: #f7f7f8;
	}

	// 购物车列表
	.cart-list {
		padding: 0 20rpx;

		// 优惠提示
		.tips {
			display: flex;
			align-items: center;
			line-height: 1;
			margin: 30rpx 10rpx;
			font-size: 26rpx;
			color: #666;

			.label {
				color: #fff;
				padding: 7rpx 15rpx 5rpx;
				border-radius: 4rpx;
				font-size: 24rpx;
				background-color: #27ba9b;
				margin-right: 10rpx;
			}
		}

		// 购物车商品
		.goods {
			display: flex;
			padding: 20rpx 20rpx 20rpx 80rpx;
			border-radius: 10rpx;
			background-color: #fff;
			position: relative;

			.navigator {
				display: flex;
			}



			.picture {
				width: 170rpx;
				height: 170rpx;
			}

			.meta {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
			}

			.name {
				height: 72rpx;
				font-size: 26rpx;
				color: #444;
			}

			.attrsText {
				line-height: 1.8;
				padding: 0 15rpx;
				font-size: 24rpx;
				align-self: flex-start;
				border-radius: 4rpx;
				color: #888;
				background-color: #f7f7f8;
			}

			.price {
				line-height: 1;
				font-size: 26rpx;
				color: #444;
				margin-bottom: 2rpx;
				color: #cf4444;

				&::before {
					content: '￥';
					font-size: 80%;
				}
			}

			// 商品数量
			.count {
				position: absolute;
				bottom: 20rpx;
				right: 5rpx;

				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 220rpx;
				height: 48rpx;

				.text {
					height: 100%;
					padding: 0 20rpx;
					font-size: 32rpx;
					color: #444;
				}

				.input {
					height: 100%;
					text-align: center;
					border-radius: 4rpx;
					font-size: 24rpx;
					color: #444;
					background-color: #f6f6f6;
				}
			}
		}

		.cart-swipe {
			display: block;
			margin: 20rpx 0;
		}

		.cart-swipe-right {
			display: flex;
			height: 100%;

			.button {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50px;
				padding: 6px;
				line-height: 1.5;
				color: #fff;
				font-size: 26rpx;
				border-radius: 0;
			}

			.delete-button {
				background-color: #cf4444;
			}
		}
	}

	// 空状态
	.cart-blank,
	.login-blank {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 60vh;

		.image {
			width: 400rpx;
			height: 281rpx;
		}

		.text {
			color: #444;
			font-size: 26rpx;
			margin: 20rpx 0;
		}

		.button {
			width: 240rpx !important;
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 20rpx;
			font-size: 26rpx;
			border-radius: 60rpx;
			color: #fff;
			background-color: #27ba9b;
		}
	}

	// 吸底工具栏
	.toolbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--window-bottom));
		z-index: 1;

		height: 100rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #ededed;
		border-bottom: 1rpx solid #ededed;
		background-color: #fff;
		box-sizing: content-box;

		.all {
			margin-left: 25rpx;
			font-size: 14px;
			color: #444;
			display: flex;
			align-items: center;
		}

		.all::before {
			font-family: 'erabbit' !important;
			content: '\e6cd';
			font-size: 40rpx;
			margin-right: 8rpx;
		}

		.checked::before {
			content: '\e6cc';
			color: #27ba9b;
		}

		.text {
			margin-right: 8rpx;
			margin-left: 32rpx;
			color: #444;
			font-size: 14px;
		}

		.amount {
			font-size: 20px;
			color: #cf4444;

			.decimal {
				font-size: 12px;
			}

			&::before {
				content: '￥';
				font-size: 12px;
			}
		}

		.button-grounp {
			margin-left: auto;
			display: flex;
			justify-content: space-between;
			text-align: center;
			line-height: 72rpx;
			font-size: 13px;
			color: #fff;

			.button {
				width: 240rpx;
				margin: 0 10rpx;
				border-radius: 72rpx;
			}

			.payment-button {
				background-color: #27ba9b;

				&.disabled {
					opacity: 0.6;
				}
			}
		}
	}

	// 底部占位空盒子
	.toolbar-height {
		height: 100rpx;
	}
</style>